<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="文章表"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button
          type="primary"
          v-auth="'t.article.create'"
          :icon="CirclePlus"
          @click="openAddEdit('新增文章表')"
          disabled
        >
          新增
        </el-button>
        <el-button
          v-auth="'t.article.remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
        <el-button
          v-auth="'t.article.import'"
          type="primary"
          :icon="Upload"
          plain
          @click="importData"
        >
          导入
        </el-button>
        <el-button
          v-auth="'t.article.export'"
          type="primary"
          :icon="Download"
          plain
          @click="downloadFile"
        >
          导出
        </el-button>
      </template>
      <!-- 表格字段自定义 -->
      <template #categoryId="{ row }">
        <el-select
          v-model="row.categoryId"
          placeholder="分类文章"
          size="large"
          style="width: 120px"
          disabled
        >
          <el-option
            v-for="item in Category"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #articleType="{ row }">
        <el-select v-model="row.articleType" clearable placeholder=" (1原创 2转载 3翻译)" disabled>
          <el-option label="原创" :value="1" />
          <el-option label="转载" :value="2" />
          <el-option label="翻译" :value="3" />
        </el-select>
      </template>
      <template #isTop="{ row }">
        <el-select v-model="row.isTop" placeholder="是否置顶" disabled>
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </template>
      <template #isDelete="{ row }">
        <el-select v-model="row.isDelete" placeholder="是否删除" disabled>
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </template>
      <template #isRecommend="{ row }">
        <el-select v-model="row.isRecommend" placeholder="是否推荐" disabled>
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </template>
      <template #status="{ row }">
        <el-select v-model="row.status" placeholder="是否推荐" disabled>
          <el-option label="公开" :value="1" />
          <el-option label="私密" :value="2" />
          <el-option label="评论可见" :value="3" />
        </el-select>
      </template>
      <template #articleCover="{ row }">
        <el-image style="width: 100px; height: 100px" :src="row.articleCover" fit="cover" />
      </template>
      <template #operation="{ row }">
        <el-button
          v-auth="'t.article.update'"
          type="primary"
          link
          :icon="EditPen"
          @click="EditContent(row)"
        >
          编辑文章内容
        </el-button>
        <el-button
          v-auth="'t.article.update'"
          type="primary"
          link
          :icon="EditPen"
          @click="openAddEdit('编辑文章表', row, false)"
        >
          编辑
        </el-button>
        <el-button
          v-auth="'t.article.remove'"
          type="primary"
          link
          :icon="Delete"
          @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <TArticleForm ref="tArticleRef" />
    <ImportExcel ref="ImportExcelRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { CirclePlus, Delete, EditPen, Upload, Download } from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  createTArticleApi,
  removeTArticleApi,
  updateTArticleApi,
  getTArticleListApi,
  getTArticleDetailApi,
  importTArticleExcelApi,
  exportTArticleExcelApi
} from '@/api/modules/tarticle/tArticle'
import { useHandleData } from '@/hooks/useHandleData'
import TArticleForm from '@/views/article/tArticle/components/TArticleForm.vue'
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
import type { ITArticle } from '@/api/interface/tarticle/tArticle'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { downloadTemplate } from '@/api/modules/system/common'
import { useDownload } from '@/hooks/useDownload'
import { getTCategoryListApi } from '@/api/modules/tcategory/tCategory'
//跳转路由
import { useRouter } from 'vue-router'
const router = useRouter()

defineOptions({
  name: 'TArticleView'
})
const proTableRef = ref<ProTableInstance>()
// 表格配置项
const columns: ColumnProps<ITArticle.Row>[] = [
  { type: 'selection', width: 80 },
  { prop: 'userId', label: '作者id' },
  { prop: 'categoryId', label: '分类', width: 200 },
  { prop: 'tagId', label: '标签', width: 150 },
  { prop: 'articleCover', label: '缩略图', width: 200 },
  { prop: 'articleTitle', label: '文章标题' },
  { prop: 'articleCatalogue', label: '文章目录' },
  { prop: 'articleContent', label: '文章内容' },
  { prop: 'articleType', label: '类型 (1原创 2转载 3翻译)' },
  { prop: 'isTop', label: '是否置顶 (0否 1是)' },
  { prop: 'isDelete', label: '是否删除 (0否 1是)' },
  { prop: 'isRecommend', label: '是否推荐 (0否 1是)' },
  { prop: 'status', label: '状态 (1公开 2私密 3评论可见)' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]
// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'userId', label: '作者id', el: 'input' },
  { prop: 'categoryId', label: '分类id', el: 'input' },
  { prop: 'articleCover', label: '缩略图', el: 'input' },
  { prop: 'articleTitle', label: '文章标题', el: 'input' },
  { prop: 'articleContent', label: '文章内容', el: 'input' },
  { prop: 'articleType', label: '类型 (1原创 2转载 3翻译)', el: 'select' },
  { prop: 'isTop', label: '是否置顶 (0否 1是）', el: 'input' },
  { prop: 'isDelete', label: '是否删除 (0否 1是)', el: 'input' },
  { prop: 'isRecommend', label: '是否推荐 (0否 1是)', el: 'input' },
  { prop: 'status', label: '状态 (1公开 2私密 3评论可见)', el: 'select' }
]
// 获取table列表
const getTableList = (params: ITArticle.Query) => {
  let newParams = formatParams(params)
  return getTArticleListApi(newParams)
}
const formatParams = (params: ITArticle.Query) => {
  let newParams = JSON.parse(JSON.stringify(params))
  return newParams
}
// 打开 drawer(新增、查看、编辑)
const tArticleRef = ref<InstanceType<typeof TArticleForm>>()
const openAddEdit = async (title: string, row: any = {}, isAdd = true) => {
  if (!isAdd) {
    const record = await getTArticleDetailApi({ id: row?.id })
    row = record?.data
  }
  const params = {
    title,
    row: { ...row },
    api: isAdd ? createTArticleApi : updateTArticleApi,
    getTableList: proTableRef.value?.getTableList
  }
  tArticleRef.value?.acceptParams(params)
}
// 删除信息
const deleteInfo = async (params: ITArticle.Row) => {
  await useHandleData(removeTArticleApi, { ids: [params.id] }, `删除【${params.id}】文章表`)
  proTableRef.value?.getTableList()
}
// 批量删除信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(removeTArticleApi, { ids }, '删除所选文章表')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}
// 导入
const ImportExcelRef = ref<InstanceType<typeof ImportExcel>>()
const importData = () => {
  const params = {
    title: '文章表',
    templateName: '文章表',
    tempApi: downloadTemplate,
    importApi: importTArticleExcelApi,
    getTableList: proTableRef.value?.getTableList
  }
  ImportExcelRef.value?.acceptParams(params)
}
// 导出
const downloadFile = async () => {
  let newParams = formatParams(proTableRef.value?.searchParam as ITArticle.Query)
  useDownload(exportTArticleExcelApi, '文章表', newParams)
}

//分类列表
const Category = ref([])

const getCategoryList = async () => {
  const res = await getTCategoryListApi({})
  console.log(res)
  Category.value = res.data.rows.map((item: any) => {
    return {
      label: item.categoryName,
      value: item.id
    }
  })
}

//编辑文章内容
const EditContent = async (row: any) => {
  //跳转到编辑文章内容页面
  console.log(row)

  await router.push({
    name: 'release',
    query: {
      title: row.articleTitle,
      content: row.articleContent
    }
  })
}

onMounted(() => {
  getCategoryList()
})
</script>
